<template>
  <div class="avue-contail"
       :class="{'avue--collapse':isCollapse,}">
    <div class="avue-layout"
         :class="{'avue-layout--horizontal':isHorizontal}">
      <div class="avue-sidebar"
           v-show="validSidebar">
        <!-- 左侧导航栏 -->
        <logo :menu-collapse="menuCollapse"/>
        <sidebar :menu-collapse="menuCollapse"/>
      </div>
      <div class="avue-main">
        <!-- 顶部导航栏 -->
        <top ref="top"/>
        <!-- 顶部标签卡 -->
        <tags/>
        <search class="avue-view" v-show="isSearch"></search>
        <!-- 主体视图层 -->
        <div id="avue-view" v-show="!isSearch" v-if="isRefresh">
          <router-view #="{ Component }">
            <keep-alive :include="tagsKeep">
              <component :is="Component"/>
            </keep-alive>
          </router-view>
        </div>
        <div class="">
          <p class="copyright text-center">{{ website.copyright }}</p>
        </div>
      </div>
    </div>

  </div>
</template>

<script>

import {validDataNull} from 'utils/validate'
import tags from "./tags.vue";
import search from "./search.vue";
import logo from "./logo.vue";
import top from "./top/index.vue";
import sidebar from "./sidebar/index.vue";

import useUserStore from "@/stores/useUserStore";

import {mapState} from "pinia";
import useCommonStore from "@/stores/useCommonStore";
import useRouterStore from "@/stores/useRouterStore";
import {debounce, getScreen} from "utils/util";
import website from "../../config/website";


export default {
  name: "index",
  components: {
    top,
    logo,
    tags,
    search,
    sidebar
  },
  props: [],
  provide() {
    return {
      index: this
    };
  },

  data() {
    return {
      menuCollapse: false,
      debounceWindowSizeChangeFun: null,
    }
  },
  computed: {
    website() {
      return website
    },
    ...mapState(useRouterStore, ["tagsKeep"]),
    ...mapState(useCommonStore, ["isHorizontal", "isRefresh", "isLock", "isCollapse", "isSearch", "menu", "setting",]),
    validSidebar() {
      return !((this.$route.meta || {}).menu === false || (this.$route.query || {}).menu === 'false')
    }
  },
  watch: {
    isCollapse() {
      this.windowSizeChange()
    }
  },

  created() {
    this.menuCollapse = this.isCollapse
    this.debounceWindowSizeChangeFun = debounce(this.windowSizeChange, 100)
  },
  mounted() {
    window.addEventListener("resize", this.debounceWindowSizeChangeFun);
  },
  methods: {
    //打开菜单
    openMenu(item = {}) {
      const userStore = useUserStore()
      userStore.GetMenu(item.parentId).then(data => {
        if (data.length !== 0) {
          this.$router.$avueRouter.formatRoutes(data, true);
        }
        //当点击顶部菜单做的事件
        if (validDataNull(item)) {
          return
        }
        let itemActive = {};
        let childItemActive = 0;
        //vue-router路由
        if (item.path) {
          itemActive = item;
        } else {
          if (this.menu[childItemActive].length === 0) {
            itemActive = this.menu[childItemActive];
          } else {
            itemActive = this.menu[childItemActive].children[childItemActive];
          }
        }
        userStore.SET_MENUID(item)
        this.$router.push({
          path: itemActive.path
        });

      })

    },

    windowSizeChange() {
      this.menuCollapse = getScreen(this.isCollapse);
    }
  },
  beforeUnmount() {
    window.removeEventListener("resize", this.debounceWindowSizeChangeFun);
  }
};
</script>
